<template>
  <div>
    <HeaderBar />
    <div class="container">
      <div class="carousel">
        <!-- 轮播图组件 -->
        <BannerCarousel :slides="slides" :listTitle="listTitle" :listItems="listItems" />
      </div>
    </div>
    <a href="https://saas-shop.jiakaobaodian.com/runtu/cooperate.html" class="jxb-banner">
      <img src="https://www.jiakaobaodian.com/core-assets/static/images/common/banner-jxb.png" alt="">
    </a>
    <FooterVoid />
  </div>
  
</template>

<script>
import BannerCarousel from '@/components/BannerCarousel.vue'
import HeaderBar from '@/components/HeaderBar.vue'
import FooterVoid from '@/components/FooterVoid.vue'

export default {
  name: 'App',
  components: {
    BannerCarousel,
    HeaderBar,
    FooterVoid
  },
  data() {
    return {
      slides: [
        {
          image: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaxiaobang.png'
        },
        {
          image: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_download.png'
        },
        {
          image: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_new1.jpeg'
        },
        {
          image: 'https://www.jiakaobaodian.com/core-assets/static/images/common/home_banner_jiaolian.jpg'
        }
      ],
      listTitle: '学车流程',
      listItems: [
        {
          icon: '✎',
          title: '科目一',
          link: '#',
          description: '2024新题库'
        },
        {
          icon: '🎥',
          title: '科目二',
          link: '#',
          description: '精选视频，详解考点'
        },
        {
          icon: '🚗',
          title: '科目三',
          link: '#',
          description: '全方位讲解，攻克难点'
        },
        {
          icon: '📄',
          title: '科目四',
          link: '#',
          description: '2024新题库'
        }
      ]
    };
  },
};
</script>

<style>
.carousel {
  position: relative;
}
.jxb-banner {
  display: block; /* 确保链接以块级元素显示 */
  margin: 20px auto; /* 上下间距为20px，左右自动居中 */
  text-align: center; /* 内部文本居中 */
}
</style>
